<template>
    <div class="permissionRole">
        <div style="margin:15px 0">
            <el-row :gutter="10" class="row-bg" justify="space-around">
                <el-col :span="1" >
                    <el-button type="primary" @click="addRole">添加</el-button>
                </el-col>
            </el-row>
        </div>
        <el-row >
            <el-col :span="24">
                <el-table :data="tableData" stripe style="width: 97%" v-loading.body="loading">
                    <el-table-column type="index" width="53">
                    </el-table-column>
                    <el-table-column label="子管理员" align="center">
                        <template scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.userName }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="状态" align="center">
                        <template scope="scope">
                            <el-tag>{{ scope.row.status == '1' ? "启用" : "禁用" }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template scope="scope">
                            <el-button size="small" @click="deleteAdmin(scope.row)">删除</el-button>
                            <el-button size="small" type="success" @click="updateStatus(scope.row,1)" v-if="scope.row.status == 0">启用</el-button>
                            <el-button size="small" type="danger" @click="updateStatus(scope.row,0)" v-else>禁用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: "permissionRole",
    data: function() {
        return {
            loading :false,
            tableData : []
        }
    },
    methods: {
        addRole () {
            this.$ddapi.chooseUserOne().then(res => {
                this.loading = true;
                this.$http.post('api/permission/createAdmin',{user : res }).then(res => {
                    let result = res.data;
                    if (result.code == 100) {
                        this.loading = false;
                        this.message("添加成功",'success');
                        this.initList();
                    }
                    if(result.code == 101){
                        this.loading = false;
                        this.message("当前用户已存在",'error');
                    }
                });
            });
        },
        deleteAdmin (row) {
            this.$confirm("确认删除?", "提示", { confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(res => {
                this.loading = true;
                this.$http.post('api/permission/deleteAdminById',{roleId : row._id }).then(res => {
                    let result = res.data;
                    if (result.code == 100) {
                        this.loading = false;
                        this.message("删除成功",'success');
                        this.initList();
                    }
                });
            });
        },
        updateStatus (res,num) {
            this.loading = true;
            this.$http.post('api/permission/updateStatus',{roleId : res._id ,status : num}).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.loading = false;
                    this.message("操作成功",'success');
                    this.initList();
                }
            });
        },
        initList: function(res) {
            this.loading = true;
            this.$http.post('api/permission/queryAdminList').then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.tableData = result.data;
                    this.loading = false;
                }
            });
        },
        message: function(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        }
    },
    created: function() {
        this.initList();
    }
}
</script>